<script setup lang="ts">
import { onMounted } from 'vue';

interface fire {
  id: number,
  r: number,
  total: number,
  color: string
}

interface fireworksPosition {
  duration: number,
  left: string,
  top: string,
  color: string,
  fireworksArr: fire[]
}
defineProps({
  firework: {
    type: Object as () => fireworksPosition
  }
})

// 求烟花爆炸后水平和垂直位移的距离
interface distance {
  x: number,
  y: number,
}
const getDistance = (r: number, total: number, num: number): distance => {
  // 获取弧度
  const radian: number = 2 / total * Math.PI * num

  // 临边长度
  const x: number = Math.floor(Math.cos(radian) * r)
  // 对边长度
  const y: number = Math.floor(Math.sin(radian) * r)

  return {
    x,
    y
  }
}

// 初始爱
const initFireworkTranslate = (): void => {

}

onMounted((): void => {

})
</script>

<template>
  <!-- 烟花弹 -->
  <div class="fire_box">
    <div class="firework_bomb" :style="{ backgroundColor: firework?.color }"></div>
    <section v-for="item in firework?.fireworksArr" :key="item.id">
      <div v-for="index in item.total" :key="index" class="fireworks"
        :style="{ '--fireworkX': `translate(${getDistance(item.r, item.total, index).x}rem`, '--fireworkY': `${getDistance(item.r, item.total, index).y}rem`, backgroundColor: item.color }">
      </div>
    </section>

  </div>
</template>

<style lang='scss' scoped>
@keyframes fire {

  0% {
    transform: translate(0, 0);
  }

  10% {
    transform: translate(0, -30%);
  }

  20% {
    transform: translate(0, -60%);
  }

  30% {
    transform: translate(0, -80%);
  }

  40% {
    transform: translate(0, -90%);
  }

  60%,
  100% {
    transform: translate(0, -100%);
  }

}

@keyframes fireShow {

  60% {
    transform: scale(1);
    opacity: 1;
    border-radius: 20%;
  }

  100% {
    transform: scale(1.5);
    opacity: 0;
    border-radius: 50%;
  }

}

@keyframes fireBomb {
  60% {
    opacity: 0;
    transform: translate(0, 0);
  }

  61% {
    opacity: 1;
  }

  100% {
    transform: translate(var(--fireworkX), var(--fireworkY));
    opacity: 0;
  }
}


.fire_box {
  animation: fire 2s ease-out infinite;
  // position: fixed;
  // top: 50%;
  // bottom: 0;
  // left: 50%;
  transition: all;


  .firework_bomb {
    animation: fireShow 2s linear infinite;
    // animation-duration: 10s;
    position: absolute;
    bottom: -10rem;
    left: calc(50% - 10rem);
    width: 20rem;
    height: 20rem;

    background-color: #ffe600;
    border-radius: 20%;

  }

  .fireworks {
    position: absolute;
    left: calc(50% - 5rem);
    bottom: -5rem;

    width: 10rem;
    height: 10rem;
    background-color: #f00;
    color: #ff0800;
    opacity: 0;

    animation: fireBomb 2s linear infinite;
  }
}
</style>